<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ztree 应用到 地区管理</title>
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css">
<script src="ztree/js/jquery-3.1.1.min.js"></script>
<script src="ztree/js/jquery.ztree.core.min.js"></script>
<script src="ztree/js/jquery.ztree.excheck.min.js"></script>
<script src="ztree/js/jquery.ztree.exedit.min.js"></script>
</head>
<body>

<div style="width:600px;">
	<a id="add" href="#" title="新增地区" onclick="add()">新增地区</a> 
	<a id="update" href="#" title="更新地区" onclick="update()">更新地区</a> 
	<a id="remove" href="#" title="删除地区" onclick="deleteArea()">删除地区</a> 
	
</div>
<div id="edit" style="display:none">
	<form action="/j-web-area/area/update" method="post">
		<input type="hidden" id="id"  />
		当前编码<input type="text" id="cid" />
		父编码<input type="text" id="pid" />
		地名<input type="text" id="name" />
		<input id="updateArea" value="更新" type="button" onclick="sendArea('update')"/>
		<input id="saveArea" value="新增" type="button" onclick="sendArea('save')"/>
		<input id="delArea" value="删除" type="button" onclick="sendArea('delete')"/>
	</form>
</div>
<di>
	<li><p>
			 result:<br/>
			 <ul id="log" class="log"></ul>
		</p>
	</li>
</di>
<div>
	<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
</div>

<script>

var treeNode;
var hrefIframe;
var setting = {
	view: {
		dblClickExpand: false,
		showLine: true,
		selectedMulti: false
	},
	edit: {
		enable: false,
		showRemoveBtn: false,
		showRenameBtn: false
	},
	async:{
		autoParam: ["id"],
		enable:true,
		contentType:"application/json",
		dataType:"json",
		url:"/j-web-area/area",
		type:"post"
	},
	data: {
		keep: {
			parent:true,
			leaf:true
		},
		simpleData: {
			enable:true,
			idKey: "cid",
			pIdKey: "pid",
			rootPId: ""
		}
	},
	callback: {
		onClick:zTreeOnClick
	}
};

/* 编辑  */
/* 单击事件 */
 function zTreeOnClick(event, treeId, treeNode){
	 $('#cid').val(treeNode.cid);
	 $('#pid').val(treeNode.pid);
     $('#name').val(treeNode.name);
     $('#id').val(treeNode.id);
 };
/* 添加 */
function add() {
	$('#updateArea').hide();
	$('#saveArea').show();
	$('#delArea').hide();
	if(check()){
		return;
	}
	showEdit();
};
/* 检查是否被选中 */
function check(){
	var zTree = $.fn.zTree.getZTreeObj("tree"),
	nodes = zTree.getSelectedNodes(),
	treeNode = nodes[0];
	if (nodes.length == 0) {
		alert("请先选择一个节点");
		return true;
	}
}
/* 清空编辑框 */
function clearEdit(){
	 $('#cid').val('');
	 $('#pid').val('');
     $('#name').val('');
     $('#id').val('');
}
/* 显示编辑框 */
function showEdit(){
	$('#edit').css("display","");
}
function hiddenEdit(){
	$('#edit').css("display","none");
	clearEdit();
}
/* 更新 */
function update() {
	$('#updateArea').show();
	$('#saveArea').hide();
	$('#delArea').hide();
	if(check()){
		return;
	}
	showEdit();
};
/*编辑*/
function sendArea(url){
	var id = $('#id').val();
	var cid = $('#cid').val();
	var pid = $('#pid').val();
	var name = $('#name').val();
	
	 $.post('/j-web-area/area/'+url,{id:id,cid:cid,pid:pid,name:name},function(data){
    	 console.log(data);
    	 if(data.isOk){
    		 $('#log').text('编辑成功！');
    		 var treeObj = $.fn.zTree.getZTreeObj("tree");
    		 treeObj.reAsyncChildNodes(null, "refresh");
    	 }else{
    		 $('#log').text('编辑失败！');
    	 }
     });
}
/* 删除 */
function deleteArea() {
	$('#updateArea').hide();
	$('#saveArea').hide();
	$('#delArea').show();
	if(check()){
		return;
	}
	showEdit();
};

$(document).ready(function(){
//  初始化
	var t = $("#tree");
	t = $.fn.zTree.init(t, setting, null);
	
});
</script>
</body>
</html>